<template>
	<div class="most-expected">
			<p class="title">近期最受期待</p>
			<div class="most-expected-list">
				<div class="expected-item" v-for="item in Soon_list">
					<div class="poster default-img-bg">
						<img :src="item.img" onerror="this.style.visibility='hidden'">
						<span class="wish-bg"></span>
						<span class="wish"><span class="wish-num">{{item.wish}}</span>人想看</span>
						<div class="toggle-wish" data-wishst="0" data-movieid="42964">
							<span></span>
						</div>
					</div>
					<h5 class="name line-ellipsis">{{item.nm}}</h5>
					<p class="date">{{item.comingTitle}}</p>
				</div>
			</div>
		</div>
		<!--</div>-->
</template>

<script>
	export default{
//	  mounted(){
//		this._initData();
//		console.log("mounted")
//				},
		props:["Soon_list"],
	  	methods:{
//				_initData(){
//					return new Promise((resolve,reject)=>{
//						var xhr=new XMLHttpRequest();
//						xhr.open("GET","https://www.easy-mock.com/mock/5bd4971d855f834671b40981/maoyan_copy/maoyan");
//						xhr.send();
//						xhr.addEventListener("readystatechange",function(){
//							if(xhr.readyState==4){
//								if(xhr.status==200){
//									resolve(xhr.response)
//								}
//							}
//						})
//					}).then((res)=>{
//						this.Soon_list=JSON.parse(res).coming;
//						console.log(res)
//						})
//					}
			}		
	}			
</script>

<style lang="scss">
@charset "utf-8";
@import "../../public/scss/reset"; 
$fs:64px;
html{
    font-size: $fs;
}
@function r($px){
    @return $px/$fs*1rem;   
	
}
.most-expected{
	padding: r(24px) r(57px) r(24px) r(30px);
    background-color: #fff;
    margin-bottom: r(10px);
    .title{
    	margin: 0 0 r(24px);
	    font-size: r(28px);
	    color: #333;
    }
    .most-expected-list{
    	overflow: scroll;
    	white-space: nowrap;
    	.expected-item{
    		display: inline-block;
		    width: r(170px);
		    overflow: hidden;
		    margin-right: r(20px);
		    .poster{
		    	width: r(170px);
			    height: r(230px);
			    position: relative;
			    margin-bottom: r(12px);
			    >img{
			    	width: 100%;
			    	height: 100%;
			    	display: block;
			    }
			    .wish-bg{
			    	display: inline-block;
				    width: 100%;
				    height: r(70px);
				    position: absolute;
				    bottom: 0;
				    background-image: -webkit-linear-gradient(top,rgba(77,77,77,0),#000);
				    background-image: linear-gradient(-180deg,rgba(77,77,77,0),#000);
			    }
			    .wish{
			    	    position: absolute;
					    left: r(8px);
					    bottom: r(4px);
					    color: #faaf00;
					    font-size: r(22px);
					    font-weight: 600;
			    }
		    }
    	}
	h5{
		margin: 0 0 r(6px);
	    font-size: r(26px);
	    color: #222;
		display: block;
	    font-weight: bold;
	    text-overflow: ellipsis;
	    overflow: hidden;
	    white-space: nowrap;
    }
    .date{
    	font-size: r(24px);
    	color: #999;
    }
    }
}
</style>